<template>
	<div class="ctfQuestion-warp">
	    <Form :label-width="80" :model="formValidate" ref="formValidate">
	        <FormItem
                v-for="(item, index) in formValidate.urlList"
                :key="index"
                :label="'url：'"
                :prop="'urlList.' + index + '.url'"
                :rules="{required: item.edit, message: '不能为空', trigger: 'change'}" :v-if="show">
	            <Row>
	                <Col span="16">
	                    <Input type="text" v-model.trim="item.url" placeholder="Enter something..." v-if="item.edit"></Input>
	                    <span v-if="!item.edit">{{item.url}}</span>
	                </Col>
	                <Col span="6" offset="1">
	                	<Button @click="saveCtfUrls(item)" v-if="item.edit" size="small" type="primary">确定</Button>
	                	<Button @click="item.edit = true" v-if="!item.edit" size="small" type="primary">修改</Button>
	                    <Button @click="removeUrl(index)" v-if="!item.urlId" size="small" type="error">删除</Button> 
	                    <Button @click="delCtfUrls(item.urlId)" v-if="item.urlId" size="small" type="error">删除</Button>
	                </Col>
	            </Row>
	        </FormItem>
	        <FormItem>
	            <Row>
	                <Col span="12">
	                    <Button type="primary" ghost long @click="addUrl" class="md-add-jh">添加</Button>
	                </Col>
	            </Row>
	        </FormItem>
	    </Form>
	</div>
</template>
<script>
	import {createCtfUrls,modifyCtfUrls,delCtfUrls,queryCtfUrls} from '@/api/question'
	export default {
		props:['chaId','show'],
		data(){
			return{
				index:0,
				urlList:[],
				totalCount:0,
				url:{},
				urlModal:{
					show:false,
					loading:true,
					title:'添加Url'
				},
				formValidate:{
					chaId: this.chaId,
					url: "",
					urlList:[]
				},
				ruleValidate:{
					url:[
					   { required: true, message: 'url不能为空', trigger: 'change' }
					]
				},
				urlCol:[
					{
						type: 'index',
						width: 60,
						align: 'center',
						ellipsis: true
					},
					{
						title: 'Url',
						key: 'url',
						align: 'center',
						ellipsis: true,
						tooltip:true,
						render:(h,params) => {
							if(params.row.edit){
								return h('Input',{
									props:{
										value:params.row.value,
										type:'textarea',
										maxlength:200,
										autosize:"{minRows: 2,maxRows: 5}"
									}
								})
							}else{
								return h('span',params.row.url)
							}
						}
					},
//					{
//						title: 'createTime',
//						key: 'createTime',
//						align: 'center',
//						ellipsis: true,
//						tooltip:true
//					},
					{
					    title:'操作',
					    width:140,
					    render:(h,params) => {
					    	return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.urlModal.show = true;
											this.urlModal.title = '修改url';
											this.getCtfUrlsInfo(params.row);
										}
									}
								}, '修改'),
								h('Poptip', {
									props: {
										confirm: true,
										'ok-text': "确定",
										'cancel-text': "取消",
										type: 'error',
										size: 'large',
										title: '你确定要删除吗?',
										transfer:true
									},
									style: {
										marginLeft: '0px'
									},
									on: {
										'on-ok': () => {
											this.delCtfUrls(params.row.urlId)
										}
									}
								}, [
									h('Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
									}, '删除')
								])
							])
					    }
					},
				]
      		}
		},
		computed:{

		},
		filters:{

		},
		watch:{
			'chaId':function(id){
//				this.formValidate.chaId = id;
			},
			'show':function(show){
				if(show){
					this.queryCtfUrls();
				}
			}
		},
		methods:{
			addUrl(){
				this.index ++ ;
				this.urlList.push({url:'',index:this.index,chaId:this.chaId,edit:true})
			},
			removeUrl(index){
				this.urlList.splice(this.urlList.findIndex(url => url.index === index), 1)
			},
			queryCtfUrls(){
				queryCtfUrls(this.chaId).then(data => {
					if(data.code == 1){
						this.urlList = data.data.items || data.data;
						this.formValidate.urlList = this.urlList;
						this.urlList.forEach(url => this.$set(url,'edit',false))
						if(data.data.items){
							this.index = data.data.items.length;
						}
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			delCtfUrls(id){
				delCtfUrls(id).then(data => {
					if(data.code == 1){
						this.$Message.info('操作成功');
						this.queryCtfUrls();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			modifyCtfUrls(){
				if(this.url.url == ''){
					this.$Message.warning('Url不能为空');
					return
				}
				modifyCtfUrls(this.url).then(data => {
					this.cancelLoading('urlModal');
					if(data.code == 1){
						this.$Message.info('操作成功');
						this.urlModal.show = false;
						this.queryCtfUrls();
						let boardCast = {
							chaId:this.chaId,
							op:"修改",
							type:"url",
							name:this.url.url
						}
						this.$emit('addBoardCast', boardCast)
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			createCtfUrls(){
				if(this.url.url == ''){
					this.$Message.warning('Url不能为空');
					return
				}
				createCtfUrls(this.url).then(data => {
					this.cancelLoading('urlModal');
					if(data.code == 1){
						this.$Message.info('操作成功');
						this.urlModal.show = false;
						this.queryCtfUrls();
						let boardCast = {
							chaId:this.chaId,
							op:"添加",
							type:"访问地址",
							name:this.url.url
						}
						this.$emit('addBoardCast', boardCast)
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			saveCtfUrls(url){
				this.url  = url;
//				this.$refs['formValidate'].validate((valid) => {
//          		if (valid) {
            			if(!this.url.urlId){
            				this.createCtfUrls();
            			}else{
            				this.modifyCtfUrls()
            			}
//          		}else{
//          			this.cancelLoading('ctfModal');
//          		}
//          	})
			},
			getCtfUrlsInfo(data){
				this.formValidate = JSON.parse(JSON.stringify(data));
			},
			changePage(page){
				this.queryCtfInfo.page = page;
				this.queryCtfList();
			},
			changeSize(size){
				this.queryCtfInfo.rows = size;
				this.queryCtfList();
			},
			cancelLoading(name){
		    	this[name].loading = false;
		      	setTimeout(() => {
		      		this[name].loading = true;
		      	})
		   },
		   cancel(name){
		  		this.$refs[name].resetFields();
		  	},
		},
		mounted(){
			
		},
		created(){

		}
	}
</script>
